بسو الله الرحمن الرحيهم 


AJAX. 


Asynchronous JavaScript And XML = AJAX 


بالتمارين 


Part 2 


۶ 
8 لوہ و عدا 
آواز شیخي 
Ramanooo@ hotmail.com‏ 


00963955264766 


تاریخ اجاکس: 

مصطلح اجاكس ظهر أول مرة في مقالة بتاريخ ۸ فبراير ۲٠٠١‏ لكاتب أمريكي وقد وصف مجموعة تقنيات و 
أساليب استخدمت من قبل جوجل في جوجل أرث تمكن المستخدم من التعامل مع الموقع الإلكتروني بطريقة تشبه 
برامج الحاسوب » حيث يقوم المستخدم بالقيام بأعماله من خلال صفحة واحدة . 

مستقبل اجاکس: 

O O TT ي‎ 


O N RR yT 


تنويه مهم قبل البدء : يجب تحميل الجزء الأول من الكتاب وتعلم كيفية ربط عناصر اجاكس ببيئة .N٤۲‏ 
8 من خلال الدرس الأول في الجزء الأول من الكتاب يمكن تحميله من الرابط التالي : 


http://www.4shared.com/file/1 10593220/71ee5e0d/AJAXnet.html 


المحتويات 


تبديل ألوان عناصر الصفحة بدون استدعاء كامل الصفحة في هذا التمرين تم تطبيق 
تعديل ألوان عنصر وحيد ويمكن تطبيق التغير على عناصر متعددة في نفس الصفحة . 


التحقق من إدخال قيمة صحيحة فى الحقول وعدم تركها فراغ والتحقق يتم على 


مستوى الصفحة . 


صورة بحجم معين يتم التحكم بتصغيرها وتكبيرها داخل الصفحة وبتحديد حجم 


قائمة مشابهة لقائمة تظهر في موقع ياهوو الشهير ويمكن زيادة عدد الروابط عليها 
وان يحتوي كل رابط على مجموعة من البيانات ويتم استدعاء تلك الروابط بشكل 


اشر 


يتم وضع نمط شكل معين لإجبار المستخدم على إدخال معلومات وفق شكل محدد 
والتحقق من إدخال كل البيانات بشكل صحيح . 


فندوق تض نهر بتاخله غازة ساعد المسخدم على مفرفة مادا يجي الخال 
داخل الصندوق باستخدام ستايل شيت ويمكن تطببق عناصر التحقق لإجبار المستخدم 


زر أمر عند الضغط عليه يظهر لدينا صندوق على شكل فلاش يحتوي على نصوص أو 
إي عنصر من عناصر ا١٣"‏ ويتم إلغاء الضغط على الزر إلى إن يتم إغلاق الصندوق 
المفتوح . 


تم تفغير مفهوم الاختيار المتعدد لعنصر )۸8٤۲)80×‏ حيث سيقوم المستخدم باختيار عنصر وحيد 
من العناصر المتوفرة ولايمكنه الاختيار المتعدد. 


شريط في الصفحة عند الضغط عليه تسدل قائمة تحتوي على معلومات 
ختلفة عن تفاصيل الشريط وعند الضغط عليه مرة اخرى تختفي المعلومات 


التمرين الأول : 


Windows Internet Explorer 


(Default ,aspx* 


Un PE ١ Nf 
Ge <7 |] http localhost: 15332 


Help | xX Û Snag 8 کت‎ 


TF Favorites | TÈ, @" Account Manager AW Windows Live Hotmail @ suggested Stes > BÊ. 


File Edit. Yew Favorites Tools 


الشكل العام لبيئة العمل 


١ E Default.aspx c5 
fr Aj stylesheet ,css 
bn. web.config 


7 ا“ ر ا E‏ 


asp: ScriptManager 
asp : UpdatePanel 
asp :Label = 

asp: DropDownList 


كود صفحة ×0 5ج ,] |الاa Def‏ 


<%@ Page Language="C#" AutoEventWireup="t rue" 
CodeFile="Default.aspx.cs" Inherits="_Default" 3% 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http ://www.w3. Oorg/TR/xhtml1/DTD/xhtml1-transitional. dtd"> 


<html xmlns="http: //www.w3.org/1999/xhtml "> 
<head runat="server"> 
<title>Untitled Page</title> 
<link href="styleSheet.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
. stylel 
{ 
font-size: x-large; 
font-weight: bold; 
} 
</style> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<div style="text-align: left; background-color: #COCOCO0; "> 


<asp: ScriptManager ID="ScriptManagerl" runat="server"> 
</asp : ScriptManager> 
<span class="stylel">AJAX</span><br /> 
<br /> 
<br /> 
<asp : UpdatePanel ID="UpdatePanell" runat="server"> 
<ContentTemplat e> 
<asp:Label ID="Labell" runat="server" 
Width="201px" CssClass="ClassWhite"></asp : Label> 
<br /> 
</Content Template> 
<Triggers> 
<asp:AsyncPostBackTrigger ControllID="DropDownList1l" 
EventName="SelectedIndexChanged" /> 
</Triggers> 
</asp : UpdatePanel> 
<br /> 
<asp: DropDownList 1ID="DropDownList1" runat="server" 
AutoPostBack="True" 


OnSelectedIndexChanged="DropDownList1 SelectedIndexChanged" 
Height="22px" 
Width="218px"> 
<asp:ListItem>White</asp: List Item> 
<aspPp:ListItem>Red</asp: List Item> 
<asp:ListItem>Green</asp: List Item> 
<asp:ListItem>Blue</asp:ListItem> 
<asp:ListItem>Yellow</asp:ListItem> 
</asp :DropDownList> 
</div> 
</form> 
</body> 
</html> 


صفحة الكود الخلفي ) .×50 .) |لاة]0¢ 


using System; 


using System. Configuration; 

using System. Data; 

using System. Ling; 

using System. Web; 

using System. Web. Security; 

using System. Web. UI; 

using System. Web. UI. Html1Controls; 

using System. Web. UI. WebControls; 

using System. Web. UI.WebControls.WebParts; 
using System. Xml. Linq; 


public partial class _Default : System. Web. UI. Page 
protected void Page Load(object sender, EventArgs e) 

٤ Label1. Text = DateTime. Now. ToString(); 

a void DropDownList1 SelectedIndexChanged (object sender, 
EventArgs e) 


{ 
if (DropDownList1. SelectedValue == "Red") 
{ 
Label1l.CssClass = "ClassRed'"; 
} 
else if (DropDownList1l. SelectedValue == "Blue") 
{ 
Label1l.CssClass = "ClassBlue"; 
} 
else if (DropDownList1l. SelectedValue == "Green") 
{ 
Label1l.CssClass = "ClassGreen"; 
} 
else if (DropDownList1l. SelectedValue == "Yellow") 
{ 
Label1l.CssClass = "ClassYellow"; 
} 
else 
{ 
Label1l.CssClass = "ClassWhite";, 
} 
} 
} 
Styl e Shee), )55 كود صفحة‎ 
.ClassRed 
{ 
background-color: Red; 
} 


.ClassBlue { 
background-color: Blue; 


} 


.ClassYellow { 
background-color: Yellow; 


} 


.ClassGreen { 


background-color: Green; 


} 


.ClassWhite { 


background-color: White; 


نهاية التمرين الاول 


التمرين الثاني : 


الصورة العامة للتمرين : 


الشكل العام لبيئة العمل : 


كود صفحة ×50 ,] |لج؟0e:‏ 


sitional//EN" 


1 
ر 


r" salutiaon Salutioni' (1 project} 
g- 8 Diajax project" 
iT ûrp_pata 

Ein 


E 


web.config 


چت ی .*' 


<%@ Page Language="C#" AutoEventWireup="t rue" 
CodeFile="Default.aspx.cs" Inherits="_Default" 3% 


&%@ Register Assembly="AjaxControlToolkit" 
Namespace="AjaxControlToolkit" TagPrefix="cc1" 33 


<!DOCTYPE html PUBLIC "-//W3C//DTID XHTML 1.0 Tran 


"http://www .w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd"> 


<html xmlns="http: //www.w3.org/1999/xhtml "> 
<head runat="server"> 
<title>Untitled Page</title> 
<link href="styleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<asp: ScriptManager ID="ScriptManagerl" runat="server"> 
</asp : ScriptManager> 
<div> 
<table> 
<tr> 
<td>Name : </td> 
<td> 
<asp: TextBox runat="server" 1D="NameTextBOx" 
BorderStyle="solid" BorderWidth=" 1px" BorderColor="#a9a9a9" /> 
</td> 
</tr> 
<tr> 
<td>Phone Number: </td> 
<td> 
<asp : TextBox runat="server" 
ID="PhoneNumberText Box" BorderStyle="solid" BorderWidth=" 1px" 
BorderColor="#a9a9a9" /> 
</td> 
</tr> 
</table> 
<br /> 
<asp : RequiredFieldValidator runat="server" ID="NReq'" 

ControlToValidate="NameText BOx" 

Display="None" 

ErrorMessage="<b>Required Field Missing</b><br />A name 
is required." > 

</asp : RequiredFieldValidator> 

<cc1l :ValidatorCalloutExtender ID="NReqE" runat="server" 

TargetControl1I1D="NReq" 

HighlightCssClass="validatorCalloutHighlight "> 

</cc1 :ValidatorCalloutExtender> 
<asp : RequiredFieldValidator ID="PNReq" runat="server" 

ControlToValidate="PhoneNumberTextBOx" 

Display="None" 

ErrorMessage="<b>Required Field Missing</b><br />A phone 
number is required. <div style='margin-top : 5px; padding : 5px; border : 1px 
solid #e9e9e9; background-color: white; '><b>Other Options:</b><br /><a 
href=' javascript :alert (quot; No phone number available in 
profile. &quot;); '>Extract from Profile</a></div>"> 

</asp : RequiredFieldValidator> 
<cc1l :ValidatorCalloutExtender runat="Server" 1D="PNReqE" 

TargetControlID="PNReq'" 

HighlightCssClass="validatorCalloutHighlight " 

Width=" 350px" > 

</cc1 :ValidatorCalloutExtender> 
<asp : RegularExpressionValidator runat="server" 1D="PNRegEx" 

ControlToValidate="PhoneNumberTextBOx" 

Display="None" 

ValidationExpression=" ( (\ (\d{3}\) ?) | (\d{3}]-))?\d{3}- 
\d{4}" 

ErrorMessage="<b>Invalid Field</b><br />Please enter a 
phone number in the format:<br />(###) #HH-#Hitt"> 


</asp : RegularExpressionValidator> 
<cc1l :ValidatorCalloutExtender runat="Server" 1D="PNReqEx'" 
TargetControl1D="PNRegEx'" 
HighlightCssClass="validatorCalloutHighlight "> 
</cc1 :ValidatorCalloutExtender> 
<asp : Button ID="Buttonl" runat="server" Text='" Submit " 
OnClick=" Button1 OnClick" /><br /><br /> 
<asp : UpdatePanel ID="UpdatePanell" runat="server"> 
<ContentTemplat e> 
<asp:Label id="1lb1Message" runat="server" /> 
</ContentTemplate> 
<Triggers> 
<asp:AsyncPostBackTrigger Control1ID=" Buttonl" 
EventName="Click" /> 


</Triggers> 
</asp : UpdatePanel> 
</div> 
</form> 
</body> 
</html> 


صفحة الكود الخلفي 5) .×50 ,)لام0 


using System; 

using System. Configuration; 
using System. Data; 

using System. Ling; 

using System. Web; 

using System. Web. Security; 

using System. Web. UI; 

using System. Web. UI. Html1Controls; 
using System. Web. U1.WebControls; 
using System. Web. UI. WebControls.WebParts; 
using System. Xml. Ling; 


public partial class _Default : System. Web. UI. Page 
{ 
protected void Page Load(object sender, EventArgs e) 


{ 


} 
protected void Button1l _ OnClick (object sender, EventArgs e) 


{ 
1blMessage. Text = String.Format ("Thanks {0}, we'll give you a 
call at {1}].", NameTextBox. Text, PhoneNumberTextBox. Text) ; 
} 
} 


Sty| e Shee, )55 كود صفحة‎ 


body, div, p, hl, h2, h3, h4, ul, li, table 
{ 

margin: 0; 

padding :0; 

border: none; 


body 


background: #B4B4B4 url (images/body bg.gif) repeat left top; 


font-family: Tahoma, Arial, sans-serif; 
font-size: 75%; 
} 


.validatorCalloutHighlight 
{ 


background-color: lemonchiffon; 


} 


نهاية التمرين الثاني 


التمرين الثالث : 


الصورة العامة للتمرين 


5 a 


الشكل العام لبيئة العمل 


FEF N: 


عنصر اجاكس المستخدم 


tk Raking 
FE ReorderList 
KZ ResizableContralExtende 
ا‎ e 1 


کے I SliderExtender‏ 
کے اص کی تی 


كود صفحة ×0 5ج ,] |لاa Def‏ 


<%@ Page Language="C#" AutoEventWireup="t rue" 
CodeFile="Default .aspx.cs" Inherits="_Default" 3% 


K8@ Register Assembly="AjaxControlToolkit" 
Namespace="AjaxControlToolkit" TagPrefix="cc1" 33 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www .w3. org/TR/xhtml1/DTD/xhtml1-transitional. dtd"> 


<html xmlns="http: //www.w3.org/1999/xhtml "> 
<head runat="server"> 

<title>Untitled Page</title> 

<link href="SstyleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 

<form id="forml1" runat="server"> 

<asp :ScriptManager ID="ScriptManagerl" runat="server" /> 
<div> 

<strong>Resizable image with buttons for automatic 
resizing</strong> 

<br /><br /> 


<asp:Panel ID="PanelImage" runat="server" CssClass='"frame Image" > 
<asp : Image ID="Imagel" runat="server" 
ImageUrl="~/image/AJAX. gif" 
AlternateText="ASP.NET AJAX" style="width: 100%; 
height:100%;" /> 
</asp :Panel> 


ASP.NET AJAX is a free framework for building a new generation 
of richer, more interactive, highly personalized cross-browser web 
applications. This new web development technology from Microsoft 
integrates cross-browser client script libraries with the ASP.NET 2.0 
server-based development framework. In addition, ASP.NET AJAX offers 
you the same type of development platform for client-based web pages 
that ASP.NET offers for server-based pages. And because ASP.NET AJAX 
is an extension of ASP.NET, it is fully integrated with server-based 
services. ASP.NET AJAX makes it possible to easily take advantage of 
AJAX techniques on the web and enables you to create ASP.NET pages 
with a rich, responsive UI and server communication. However, AJAX 
isn't just for ASP.NET. You can take advantage of the rich client 
framework to easily build client-centric web applications that 
integrate with any backend data provider and run on most modern 
browsers. 

<br /><br /> 

<strong>Resizable text with "onresize" event handler</strong> 

<br /><br /> 

ASP.NET AJAX is a free framework for building a new generation of 
richer, more interactive, highly personalized cross-browser web 


applications. This new web development technology from Microsoft 
integrates cross-browser client script libraries with the ASP.NET 2.0 
server-based development framework. In addition, ASP.NET AJAX offers 
you the same type of development platform for client-based web pages 
that ASP.NET offers for server-based pages. And because ASP.NET AJAX 
is an extension of ASP.NET, it is fully integrated with server-based 
services. ASP.NET AJAX makes it possible to easily take advantage of 
AJAX techniques on the web and enables you to create ASP.NET pages 
with a rich, responsive UI and server communication. However, AJAX 
isn't just for ASP.NET. You can take advantage of the rich client 
framework to easily build client-centric web applications that 
integrate with any backend data provider and run on most modern 
browsers. 

<br /><br /> 

<cc1l : ResizableControlExtender ID="ResizableControlExtender1l " 
runat="server" 
BehaviorlID="ResizableControlBehavior1l " 
TargetControlID="PanelImage" 
ResizableCssClass="resizingImage" 
HandleCssClass="handleImage " 
MinimumWi dt h="50" 
MinimumHeight="2 6" 
MaximumWi dt h="250" 
MaximumHeight=" 170" 
HandleOffsetX=" 3" 
HandleOoffsetY¥="3"'> 

</cc1l :ResizableControlExtender> 


</div> 
</form> 
</body> 
</html> 


Sty| e Shee, )55 كود صفحة‎ 


body, div, p, hl, h2, h3, h4, ul, li, table 
{ 

margin: 0; 

padding :0; 

border: none; 


body 


background: #B4B4B4 url (images/body_ bg.gif) repeat left top; 
font-family: Tahoma, Arial, sans-serif; 
font-size: 75%; 


} 


.handleImage 

{ 
width:15px; 
height :16px; 
background-image : url (images/HandleHand. png) ; 
overflow: hidden; 
cursor: se-resize; 


} 


. resizingImage 


{ 


padding: 0px; 
border-style:solid; 
border-width: 3px; 
border-color: #B4D35D; 


} 


. frameImage 


width: 130px; 
height : 65px; 
overflow: hidden; 
float :left; 
padding: 3px; 


{ 


} 


. frameText 


width: 100px; 
height : 100px; 

overflow: auto; 

float :left; 
background-color: #ffffff; 
border-style: solid; 
border-width: 2px; 
border-color: Gray; 
font-family : Helvetica; 
1ine-height :normal; 


نهاية التمرين الثالث 


{ 


التمرين الرابع : 


الصورة العامة للتمرين 


@ Untitled Page 


Tab Three 


PAGE ONE - Sample HTML Content for Tab 


الشكل العام لبيئة العمل 


r Solution 'Solution1' {1 project} 
: Difajax projectié' 


= Û ûpp_pata 
E OR Ein 

E ees 
= Ëğ web.config 


e mm 


- SliderExtender و‎ 
E SlideShowExtender 
E TextBoxwatermarkExtender ا‎ 

ToggleButtanExtenider‏ ي 


E ا‎ 


Def au| ) , 50× كود صفحة‎ 


<%@ Page Language="C#" AutoEventWireup="t rue" 
CodeFile="Default .aspx.cs" Inherits="_ Default" %% 


K%@ Register Assembly="AjaxControlToolkit" 
Namespace="AjaxControlToolkit" TagPrefix="cc1" 33 


<!DOCTYPE html PUBLIC "-//W3C//DTID XHTML 1.0 Transitional//EN" 
"http://www .w3. org/TR/xhtml1/DTD/xhtml1-transitional. dtd"> 


<html xmlns="http: //www.w3.org/1999/xhtml "> 
<head runat="server"> 
<title>Untitled Page</title> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<asp: ScriptManager ID="ScriptManagerl" runat="server" /> 
<script type="text/ javascript "> 
function PanelClick (sender, e) 


{ 
} 
function ActiveTabChanged (sender, e) 
{ 
} 
</script> 
<div> 
<ccl1l:TabContainer ID="TabContainerl" runat="server"> 
<ccl1l :TabPanel runat="Server" 1ID="Panell" HeaderText="Tab 
One"> 
<ContentTemplate> 
<br />PAGE ONE - Sample HTML Content for Tab 
</ContentTemplate> 
</cc1l :TabPanel> 
<ccl :TabPanel runat="Server" ID="Panel2" HeaderText="Tab 
Two'"> 
<ContentTemplate> 
PAGE TWO -¬- Sample HTML Content for Tab 
</ContentTemplate> 


</cc1l :TabPanel> 


<ccl :TabPanel runat="Server" ID="Panel3" 
OnClientClick="PanelClick" HeaderText="Tab Three'"> 
<ContentTemplat e> 
<br />PAGE THREE - Sample HTML Content for Tab 
</Content Template> 
</cc1l :TabPanel> 


</cc1l :TabContainer> 
</div> 
</form> 
</body> 
</html> 


نهاية التمرين الرابع 


الشكل العام ية العمل 


ا 
< 


& 


Saluktion 'Solution1' (1 project} 
ğ- E Difajax project ا‎ 
1 e FT App_Data : 
EH ig Ein 


i web ,config 


عنصر اجاكس المستخدم 


Def au | |, 50× كود صفحة‎ 


<%e Page Language="C#" AutoEventWireup="t rue" 
CodeFile="Default .aspx.cs" Inherits="_Default" $% 


&%@ Register Assembly="AjaxControlToolkit" 


Namespace="AjaxControlToolkit" TagPrefix="ccl" ES 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www .w3. org/TR/xhtml1/DTD/xhtml1-transitional. dtd"> 


<html xmlns="http: //www.w3.org/1999/xhtml "> 
<head runat="server"> 
<title>Untitled Page</title> 
<link href="styleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<asp: ScriptManager ID="ScriptManagerl" runat="server"> 
</asp :ScriptManager> 
<div> 
<br /><br /> 
Enter a Date in the format 99/99/9999 (culture sensitive) <br 
> 
<asp: TextBox ID="TextBoxl1" runat="server"></asp: TextBox> 
<cc1l :MaskedEditExtender 1ID="MaskedEditExtender1l " 
runat="server" 
TargetControlID="TextBOx]1 " 
Mask="99/99/9999" 
MaskType="Date" 
MessageValidatorTip="true" 
OnFocusCssClass="MaskedEditFocus" 
OnlInvalidCssClass="MaskedEditError"> 
</cc1 :MaskedEditExtender> 
<cc1l :MaskedEditValidator ID="MaskedEditValidatorl" 
runat="server" 
ControlToValidate="Text BOx]1 " 
ControlExtender='"MaskedEditExtender1 " 
Display="Dynamic" 
TooltipMessage="PLease enter a date" 
IsValidEmpty="false" 
EmptyValueMessage="A Date is Required" 
InvalidValueMessage="Ths date is invalid"> 
</cc1l :MaskedEditValidator> 


<br /><br /> 
Enter a Number in the format $99, 999.00 <br /> 
<asp: TextBox ID="TextBox2" runat='"server"></asp : TextBox> 

<ccl1l :MaskedEditExtender 1ID="MaskedEditExtender2 " 
runat="server" 
TargetControlID="Text BOox2 " 
Mask="99, 999.99" 
MaskType='"Number" 
MessageValidatorTip='"true" 
OnFocusCssClass="MaskedEditFocus" 
OnlInvalidCssClass="MaskedEditError" 
InputDirection="RightToLeft " 
DisplayMoney="Left " 
AcceptNegative="Left"> 

</cc1l :MaskedEditExtender> 

<cc1l :MaskedEditValidator ID="MaskedEditValidator2" 
runat="server" 
ControlToValidate="Text BOx2 " 
ControlExtender="MaskedEditExtender2" 
Display="Dynamic" 
TooltipMessage="Please enter a value between -100 and 

12000" 


IsValidEmpty="false" 
EmptyValueMessage='"A Number is Required" 
InvalidValueMessage="This Number is invalid" 
MinimumValue='"-100" 
MinimumVa lueMessage="The value is too small . " 
MaximumVa lue="12000" 
MaximumVa lueMessage="The number is too large"> 
</cc1 :MaskedEditValidator> 
<br /><br /> 
Enter a Time in the Format 99:99:99 (type A or P for AM and 
PM) <br /> 
<asp: TextBox ID="TextBox3" runat='"server"></asp : TextBox> 
<cc1l :MaskedEditExtender 1ID="MaskedEditExtender3" 
runat="server" 
TargetControlID="TextBOx3" 
Mask=" 99: 99:99" 
MaskType="Time" 
MessageValidatorTip='"true" 
OnFocusCssClass="MaskedEditFocus'" 
OnInvalidCssClass="MaskedEditError" 
AcceptAMPM= "true'"'> 
</cc1 :MaskedEditExtender> 
<cc1l :MaskedEditValidator ID="MaskedEditValidator3" 
runat="server" 
ControlToValidate="TextBOx3'" 
ControlExtender="MaskedEditExtender3" 
Display="Dynamic " 
TooltipMessage="Please Enter a Time" 
IsValidEmpty="false" 
EmptyValueMessage="A Time is Required" 
InvalidValueMessage="This Time is invalid"> 
</cc1 :MaskedEditValidator> 
<br /><br /> 
</div> 
</form> 
</body> 
</html> 


Sty| e Shee, )55 كود صفحة‎ 


body, div, p, hl, h2, h3, h4, ul, li, table 
{ 

margin: 0; 

padding :0; 

border: none; 


body 
background: #B4B4B4 url (images/body bg.gif) repeat left top; 


font-family: Tahoma, Arial, sans-serif; 
font-size: 75%; 


} 


.MaskedEditFocus 


{ 
background-color: #ffffcc; 


color: #000000; 


} 


.MaskedEditError 
{ 


background-color: #ffcccc; 


} 


نهاية التمرين الخامس 


التمرين السادس : 


الشكل العام للتمرين 


3 Untied Page - 


Microsoft Internet Explorer 


Fils Edit Yiegw Favorites Tools Help 


Q sar : 3 5 2 کر و‎ Search SF Favorktes @ 8 7 2 r 4 


E 
Address Î http: localhost: 1048/HOI-ACT-TextBoxwatermark- vB/Defaul. aspx # 


myweþsearch > | Search < ۳ myWebFace. ¥ f Girlsense 


کاس اس“ کے س ا O‏ 


re» BoxWatermarkExt ender‏ يستخدم عنصر اجاکس بشكل فردي مع كل صندوق نص يتم إضافته إلى 
الصفحة ويتم الربط عبر 17«9٥إغ”ه-٤٤٠موءهة٣‏ الذي يعتبر مفتاح الربط بين العناصر الأساسية في ۸8۶۴ 
وعناصر الاجاكس حيث يتم الربط عبر المعرف الأساسي للعنصر . 


الشكل العام لبيئة العمل : 


Solution “Solution1' (1 project}‏ ا 
E E D:1...1Solutionz)‏ 
Î App_pata‏ “ 
El A Ein‏ 
Hl: 3| Default ,aspx 1‏ 
StyleSheekt,css‏ اھ e‏ 
چ hn ik web, config‏ 


گے ۴ ا 


عنصر اجاكس المستخدم في التمرين : 


1 SlideShowExterıder 3# 
[7 Tabcontainer E 
Eq TextBoxWwatermarkExtender 


| ÊÊ ToggleButtonExtender 


Lg TonlkitScripEManager 
4 EF ا‎ 


أ 


Def au| ] , 25 0× كود صفحة‎ 


<%@ Page Language="C#" AutoEventWireup= "true" 
CodeFile="Default.aspx.cs" Inherits="_Default" 3% 


K8@ Register Assembly="AjaxControlToolkit" 
Namespace="AjaxControlToolkit" TagPrefix="cc1" 33 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www .w3. org/TR/xhtml1/DTD/xhtml1-transitional. dtd"> 


<html xmlns="http: //www.w3.org/1999/xhtml1 "> 
<head runat="server"> 


<title>6</title> 

<link href="styleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 


<form id="forml1" runat="server"> 
<asp: ScriptManager ID="ScriptManagerl" runat="server"> 
</asp :ScriptManager> 
<div> 
<asp: TextBox ID='"TextBOoxl" runat="server" 
Width="307px"></asp : TextBox><br /> 
<asp: TextBox ID="TextBox2" runat="server" 
Width="307px"></asp : TextBox><br /> 
<asp : Button ID="Buttonl" runat="server" Text="Button" /><br 
/< 
<cc1l : TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1l " 
runat="server" TargetControllD="TextBox1" 
WatermarkCssClass="watermark" WatermarkText=" Please enter a phone 
number (963) 955-264766" > 
</cc1l :TextBoxWatermarkExtender> 
<cc1l : TextBoxWatermarkExtender 1ID="TextBoxWatermarkExtender2 " 
runat="server" TargetControllD="TextBOx2" 
WatermarkCssClass="watermark" WatermarkText="Enter anything'"> 
</cc1l :TextBoxWatermarkExtender> 
</div> 
</form> 
</body> 
</html> 


Sty| e Shee, )55 كود صفحة‎ 


. watermark 


background: #FFAAFF; 


{ 


تحتوي صفحة التنسیق على صف يتم مناداته عبر عنصر اجاکس بو اسطة ءsھ1٤55٤٤۸إ2٣ءه‏ غج حيث يتم 


ذكر اسم الصف عن مناداته عبر الصفحة. 


نهاية التمرين السادس 


التمرين السابع : 


A Untitled Page - Microsoft Internet Explorer 
Fil Edt View Favorites Tools Help 


Q sa © ا‎ 2 f ر‎ Searrh e Favorites @ @ 


Address E] http: flocalhost:1121/HDI-A3AX-TK-Amination-VB/Def ault. aspx 


nee grou get the general idea of the E 
Ay HTML content that N youll want to play a bit. ۳ 
the arirıationê aze created from ziriple, reusable 
ClickeHere building blocks that you can compose together. 
Before long yall be creating dazzling veal. By 
grouping steps together and specifying them to be 


rum either in sequence or in parallel, you'll achieve 


alruoat argrthing yaoi can imagine, wîthout writing ã ۶ 
single lime of code! 


e LAE ا‎ 


الخركة ال تة فى هذا القمرین فة جا ورمن امن اسک مها کل كير شمن صفات انرق 
الالكتروني فيكون لدينا حركة جميلة في الصفحة و من الممكن إن يحتوي الصندوق على اغلب عناصر 1اط 
يحتاج تركب الكود البرمجي في هذا التمرين إلى القليل من العمل وبعض المفاهيم في 5ه ۷ه[ ويمكن 
التطوير عليه بسهولة . 


الشكل العام لبيئة العمل : 


[a Solution 'Salution1' (1 project} 
8 E Difajax projectisessionî', 
lq App_Data 
EH ig Bin 
= A Anim5heet,css 
H- Z| Default.aspx 
8 ib web,config 


عنصر اجاكس المستخدم في التمرين : 


3E Arcordian 
E ArcordionPane 
f AlnaysYisibleZontrolExtender 


AnimationExtender 1 :‏ 3% 
e "|‏ 
و ا و 


4 


Def au| ) , 50× كود صفحة‎ 


<%@ Page Language="C#" AutoEventWireup= "true" 
CodeFile="Default.aspx.cs" Inherits="_Default" 33 


K8@ Register Assembly="AjaxControlToolkit" 
Namespace="AjaxControlToolkit" TagPrefix="cc1" 3% 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www .w3. org/TR/xhtml1/DTD/xhtml1-transitional. dtd"> 


<html xmlns="http: //www.w3.org/1999/xhtml "> 
<head runat="server"> 


<title>7</title> 

<link href="AnimSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 


<form id="forml1" runat="server"> 
<asp: ScriptManager ID="ScriptManagerl" runat="server"> 
</asp :ScriptManager> 
<div class="demoarea'"> 
Any HTML content that you want. 
<br /><br /> 
<!-—- Button used to launch the animation —-—> 
<asp : Button ID="btnInfo" OnClientClick="return false; " 
runat="server" Text="Click Here" /> 
<!-—- "Wire frame" div used to transition from the button to 
the info panel --> 
<div id="flyout" class="wireFrame"></div> 
<!-—- Info panel to be displayed as a flyout when the button 
is clicked —-—> 
<div id="info" style="display: none; width: 250px; z-index: 
2; opacity: 0; filter: 
progid: DXImageTransform.Microsoft .Alpha (opacity=0); font-size: 12px; 
border: solid 1px #CCCCCC; background-color: #FFFFFF; padding: 5px; "> 
<div id="btnCloseParent" style="float: right; opacity: 100; 
filter: progid:DXImageTransform.Microsoft.Alpha (opacity=100) ; "> 
<aspPp:LinkButton ID="btnClose" runat="server" 
OnClientClick="return false;" Text="X" ToolTip="Close" 
Style="background-color: #666666; color: #FFFFFF; text-align: center; 
font-weight: bold; text-decoration: none; border: outset thin 
#FFFFFF; padding: 5px;" /> 
</div> 
Once you get the general idea of the animation's markup, you'll 
want to play a bit. All of 
the animations are created from simple, reusable building 
blocks that you can compose together. 
Before long you'll be creating dazzling visuals. By grouping 
steps together and specifying 
them to be run either in sequence or in parallel, you'll 


achieve almost anything you can 
imagine, without writing a single line of code! 
</div> 
<script type="text/ javascript" language=" javascript "> 
// Move an element directly on top of another element (and 
optionally 
// make it the same size) 
function Cover (bottom, top, ignoreSize) { 
var location = Sys.UI.DomElement .getLocation (bottom) ; 
top.style.position = 'absolute'; 
top.style.top = location.y + 'px'; 
top. style. left = location.x + 'px'; 
if (!ignoreSize) { 
top. style. height = bottom.offsetHeight + 'px'; 
top.style.width = bottom.offsetWidth + 'px'; 
} 
} 


</script> 


<cc1l :AnimationExtender 1ID="OpenAnimation" runat="server" 
TargetControlID="btnInfo'"> 
<Animations> 
<OnClick> 
<Sequence> 
&§-- Disable the button so it can't be clicked again --$% 
<EnableAction Enabled="false" /> 
&§-- Position the wire frame and show it --$% 
<ScriptAction Script="Cover ($get ('btnInfo'), 
$get ('flyout'));" /> 
<StyleAction AnimationTarget="flyout " 
Attribute="display" Value="block"/> 
-- Move the wire frame from the button's bounds to 
the info panel's bounds --$% 
<Parallel AnimationTarget="flyout" Duration=". 3" 
Fps="25'"'> 
<Move Horizontal="150" Vertical="-50" /> 
<Resize Width="260" Height="280" /> 
<Color PropertyKey="backgroundColor" 
StartValue="#AAAAAA" EndValue="#FFFFFF" /> 
</Parallel> 
<8-- Move the panel on top of the wire frame, fade it 
in, and hide the frame --%% 
<ScriptAction Script="Cover ($get ('flyout'), 
Ş$get ('info'), true);" /> 
<StyleAction AnimationTarget="info" 
Attribute="display" Value="block"/> 
<FadeIn AnimationTarget="info" Duration=". 2"/> 
<StyleAction AnimationTarget=" flyout " 
Attribute="display" Value="none"/> 
</Sequence> 
</OnClick> 
</Animations> 
</cc1 :AnimationExtender> 
<cc1l :AnimationExtender id="CloseAnimation" runat="server" 
TargetControllID="btnClose"> 
<Animations> 
<OnClick> 
<Sequence AnimationTarget="info'"> 
8-- Shrink the panel out of view <چ--‎ 
<StyleAction Attribute="overflow" Value="hidden" /> 
<Parallel Duration=".3" Fps="15'"'> 


<Scale ScaleFactor="0.05" Center="true" 
ScaleFont="true" FontUnit='"px" /> 

<FadeOout /> 
</Parallel> 
K§-- Reset the target --§% 
<StyleAction Attribute="display" Value="none"/> 
<StyleAction Attribute="width" Value="250px" /> 
<StyleAction Attribute="height" Value="" /> 
<StyleAction Attribute="fontSize" Value="12px" /> 
&§-- Enable the button 3% 
<EnableAction AnimationTarget="btnInfo" Enabled="t rue" 


< 
</Sequence> 
</OnClick> 
</Animations> 
</cc1l :AnimationExtender> 
</div> 
</form> 
</body> 
</html> 
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. demoarea { 

padding :20px; 

background: #FFF url (images/demotop. png) no-repeat left top; 
} 


. demoarea p 
{ 

Padding: 5px; 
J} 


. demoheading { 
padding-bottom: 20px; 
color:#5377A9; 
font-family:Arial, Sans-Serif; 
font-weight :bold; 
font-size:1l. 5em; 


} 


. demobottom { 

height : 8px; 

background: #FFF url (images/demobottom.png) no-repeat left 
bottom, 
} 


wirerF'rame { 

display: none; 
overflow: hidden; 

z-index: 2; 
background-color: #FFFFFF'; 
border: solid 1px #DODODO;,; 


} 


CloseButtonStyle { 
background-color: #666666; 


color: #FFFFFF; 
text-align: center; 
font-weight: bold; 
text-decoration: none; 
border: outset thin #FFFFFF; 
padding: 5px; 

} 


نهاية التمرين السابع 


التمرين الثامن : 


الشكل العام للتمرين : 


A Untitled Fage - Microsoft Internet Explorer 
File Edit View Favorites Tonls E 


0۰ ©- BBA © 05 search ff Favorites e 8- ® & - 


E 3 http: fflacalhast: 1047}HDI-41A#-TE-MutuallyExclusiywe- ERS E Faull, aspx 
mywebsearch >” | | 


الشكل العام لبيئة العمل : 


[el Solution ' HDI- A1A#-TE-MutuallyExclusiye-ZS' f: 
E. ف‎ D:11... HDI-AJAX-TE-MutuallyEmclusiyéî 
ُ ن‎ 3 ûpp_Data 


E: 8 Bin 
Hl El Default, aspx» 


8 3 readme, txt 
Aj stylesheet,css 
E 3 web „config 


E ModalPopupExtender 
11 MultiHandleSliderExtender 


Ê NoBot 


eT 


Def au| ) , 25 0× كود صفحة‎ 


<%@ Page Language="C#" AutoEventWireup= "true" 
CodeFile="Default.aspx.cs" Inherits="_ Default" 3% 


<!DOCTYPE html PUBLIC "-//W3C//DTID XHTML 1.1//EN" 
"http://www .w3. org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http: //www.w3.org/1999/xhtml "> 
<head runat="server"> 
<title>Untitled Page</title> 
<link href="styleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<form id="form1" runat="server"> 
<asp: ScriptManager ID="ScriptManagerl" runat="server" /> 
<div> 
<br /> 
<table> 
<tr> 
<td style="width: 163px; height: 30px; "> 
IS over 25 Years of Age</td> 
<td style="width: 186px; height: 30px; "> 
IS over 35 Years of Age</td> 
<td style="width: 186px; height: 30px; "> 
IS over 45 Years of Age</td> 
SJEES 
<tr> 
<td style="width: 163px'"> 
<asp : CheckBox ID="IsOver25" runat="server" 
Text="I am over 25 years old." /><br /> 


<ajaxToolkit :MutuallyExclusiveCheckBoxExtender ID="1IsOver25Ex" 
runat="server" 
TargetControlID="IsOver25" 
Key="AgeChoice" /> 


</td> 
<td style="width: 186px"> 
<asp : CheckBox ID="IsOver35" runat="server" 
Text="I am Over 35 years old." /><br /> 


<ajaxToolkit :MutuallyExclusiveCheckBoxExtender ID="1IsNotOver35Ex" 
runat="server" 
TargetControlID="IsOver35" 
Key="AgeChoice" /> 


</td> 
<td style="width: 186px'"> 
<asp : CheckBox ID="IsOver45" runat="server" 
Text="I am Over 45 years old." /><br /> 


<ajaxToolkit :MutuallyExclusiveCheckBoxExtender ID="IsNotOver5Ex" 
runat="server" 
TargetControlID=" IsOver45" 
Key="AgeChoice" /> 


</td> 
Er > 
</table> 


</div> 
</form> 
</body> 
</html> 
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body, div, p, hl, h2, h3, h4, ul, li, table 
{ 

margin: 0; 

padding :0; 

border: none; 


body 
background: #B4B4B4 url (images/body_ bg.gif) repeat left top; 


font-family: Tahoma, Arial, sans-serif; 
font-size: 75%; 


نهاية التمرين الثامن 


ج 
httpifflaocalhost:1075fs10/Default, aspx‏ ك Address‏ 


mywebsearch - | j Searrh > 


N mywebFace Î Girl5ense Oosniley cCêntral hf Ww 


Just your average MS Joe... ras 


IFyou would llke to contact me you cai send email fom my blog at either of the following web sites. 


http tw Joe n.net 
httpblags.msdn cormiTeeBtagner 
Tm a Program Manager on the Microsoft Wek Tools and Platform. 


While ray teatn i8 based n Redmond WA, Llire im New England USA with my beatiful wife and children 
and work wherever the job takes me. 1 jomed Microsoft in 2H01 after startng, bulding, and selina 

a. COM frm m New Tork City. I began as a strategic advisor to hdependent software venders (SV), 
moved to a position as a Developer Technology Expert ad Technical Evangelist, and afler three years I 
moved to the Web Tools and Platform Team. 


What do I do at Microsoft ? 

Tou would think this should be an easy question, but it's actually not. 

îy job has many parts. 

To ceormitmmicate with Microsof's Wek Development Lustorners, to know a8 


much ag I can about all web dewelopment technologies, ose made by Microsoft 
2 those made ا‎ cerge else, and to ا ا ی‎ from e a to the Web ا ا‎ 


e] اا‎ a AS A 20, 


کل 


الشكل العام لبيئة العمل : 


| Solution Explorer - Solution Solution’ (1 pfs. SMES 


BE ABLE AIS, 


2 Salution 'Solutioni' (1 project} 
= ق‎ Dajax projects 10 
و‎ pps 
Hl E" Bin 
El I images اختاري س‎ 
E E] Default.aspx 
Aj stylesheet, css 
i web.config 


ود 


عنصر اجاكس المستخدم في التمرين : 


a] LalendarExtender ا‎ 
LascadingÛrapÛown چ‎ 
Ff LalorPickerExtender س‎ 


LoamboBox 


i LoanfirmButtanExtender 


کر خد ن ا aa:‏ | 


كود صفحة ×50 ,] |لa Def‏ 


<$@ Page Language="C#" AutoEventWireup='"t rue" 
CodeFile="Default.aspx.cs" Inherits="_Default" $% 


K%@ Register Assembly="AjaxControlToolkit" 
Namespace="AjaxControlToolkit" TagPrefix="cc1" 33 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www .w3. org/TR/xhtml1/DTD/xhtml1-transitional. dtd"> 


<html xmlns="http: //www.w3.org/1999/xhtml "> 
<head runat="server"> 


<title>S9</titl1le> 

<link href="SstyleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 


<form id="forml" runat="server"> 
<asp: ScriptManager 1I1D="MasterScriptManager" 
EnableScriptGlobalization="false" runat="server"> 

</asp : ScriptManager> 

<cc1l :CollapsiblePanelExtender ID="cpe" runat="server" 
TargetControlID="ContentPanel " 
ExpandControllID="TitlePanel" 
CollapseControlID="TitlePanel " 
Collapsed="True" 
TextLabelID="Label1 " 
ExpandedText=" (Hide Details...) " 
CollapsedText=" (Show Details...) " 
SuppressPostBack="true"> 

</cc1l :CollapsiblePanelExtender> 


<asp:Panel ID="TitlePanel" runat="server" 
CssClass="collapsePanelHeader "> 
&nbsp; &nbsp; 
Who am I ?&nbsp; &nbsp; 
<asp:Label ID="Labell" runat="server"> (Show 
Details...) </asp: Label> 
</asp:Panel> 
<asp :Panel ID="ContentPanel" runat="server" 
CssClass="collapsePanel "> 
<h1> 
<br /> 
Just your average MS Joe ...</h1> 
&nbsp; If you would like to contact me you can send email from 
my blog at either 
of the following web sites. <p> 


<a 
href="http: //www. JoeOn. net ">http: //www. JoeOn. net</a></p> 
<p> 
<a 
href="http: //blogs.msdn.com/JoeStagner">http: //blogs.msdn.com/JoeStag 
ner</a></p> 
<p> 


I'm a Program Manager on the Microsoft Web Tools and 
Platform. &nbspP;, 
</p> 
<p> 
While my team is based in Redmond WA, I live in New 
England USA with my beautiful 
wife and children and work wherever the job takes me. I 
joined Microsoft in 2001 
after starting, building, and selling a .COM firm in New 
York City. I began as a 
strategic advisor to independent software venders (ISV), 
moved to a position as 
a Developer Technology Expert ad Technical Evangelist, 
and after three years I moved 
to the Web Tools and Platform Team. </p> 
<p> 
<img align="right" border="0" height="150" 
src=" images /JoeSt agUK . bmp" 
width="150" alt="" /></p> 
<h2> 
What do I do at Microsoft ?</h2> 
<p> 
You would think this should be an easy question, but it's 
actually not. 
</p> 
<p> 
My job has many parts. 
</p> 
<p> 
To communicate with Microsoft's Web Development 
Customers, to know as much as I 
can about all web development technologies, those made by 
Microsoft and those made 
by everyone else, and to communicate from the world to 
the Web development product 
teams and from the web development product teams to the 
development community. 
</p> 
</asp :Panel> 


Sty| e Shee, )55 كود صفحة‎ 


</form> 
</body> 
</html 


. collapsePanel 

{ 
width: 640px; 
height : Opx; 
background-color: white; 
overflow: hidden; 

} 

.collapsePanelHeader 

{ 
width: 640px; 
height :20px; 
color: Yellow; 
background-color: Black; 
font-weight :bold; 
float :left; 
Padding: 5px; 
cursor: pointer; 
vertical-align: middle; 


نهاية التمرين التاسع 


مع التمنیات بالتوفیق : آواز شيخي 


